<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 资产盘点表</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="asset.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">资产盘点表</div>
      <div class="nav-right">
        <i class="fas fa-filter"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 盘点任务信息 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>盘点任务信息</span>
        </div>
        <div class="card-body">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <div class="text-gray-500 text-sm">盘点任务编号</div>
              <div class="font-medium">PD202405001</div>
            </div>
            <div>
              <div class="text-gray-500 text-sm">盘点状态</div>
              <div class="text-yellow-500 font-medium">进行中</div>
            </div>
            <div>
              <div class="text-gray-500 text-sm">开始时间</div>
              <div class="font-medium">2024-05-10</div>
            </div>
            <div>
              <div class="text-gray-500 text-sm">截止时间</div>
              <div class="font-medium">2024-05-20</div>
            </div>
          </div>
          <div class="mt-3">
            <div class="text-gray-500 text-sm">盘点范围</div>
            <div class="font-medium">信息科技部所有电子设备</div>
          </div>
          <div class="mt-3">
            <div class="text-gray-500 text-sm">盘点进度</div>
            <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
              <div class="bg-blue-500 h-2.5 rounded-full" style="width: 45%"></div>
            </div>
            <div class="text-xs text-gray-500 mt-1">已盘点: 45/100</div>
          </div>
        </div>
      </div>
      
      <!-- 盘点操作 -->
      <div class="p-4">
        <div class="flex space-x-4">
          <button class="btn-primary flex-1">
            <i class="fas fa-qrcode mr-2"></i>扫码盘点
          </button>
          <button class="btn-outline flex-1">
            <i class="fas fa-search mr-2"></i>搜索盘点
          </button>
        </div>
      </div>
      
      <!-- 盘点列表 -->
      <div class="mx-4">
        <div class="flex justify-between items-center mb-2">
          <div class="text-gray-700 font-medium">待盘点资产</div>
          <div class="text-sm text-gray-500">
            <span class="text-blue-500">55</span> 项待盘点
          </div>
        </div>
        
        <!-- 资产列表 -->
        <div class="space-y-3">
          <!-- 资产项 -->
          <div class="bg-white rounded-lg shadow p-3">
            <div class="flex justify-between items-start">
              <div>
                <div class="font-medium">联想ThinkPad X1 Carbon</div>
                <div class="text-sm text-gray-500 mt-1">编号: A2023001</div>
                <div class="text-sm text-gray-500">使用人: 张三</div>
                <div class="text-sm text-gray-500">位置: 信息科技部</div>
              </div>
              <div class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded">
                待盘点
              </div>
            </div>
            <div class="flex justify-end mt-2">
              <button class="btn-sm btn-outline mr-2">
                <i class="fas fa-times mr-1"></i>未找到
              </button>
              <button class="btn-sm btn-primary">
                <i class="fas fa-check mr-1"></i>已盘点
              </button>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow p-3">
            <div class="flex justify-between items-start">
              <div>
                <div class="font-medium">戴尔 OptiPlex 7080</div>
                <div class="text-sm text-gray-500 mt-1">编号: A2023002</div>
                <div class="text-sm text-gray-500">使用人: 李四</div>
                <div class="text-sm text-gray-500">位置: 信息科技部</div>
              </div>
              <div class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded">
                待盘点
              </div>
            </div>
            <div class="flex justify-end mt-2">
              <button class="btn-sm btn-outline mr-2">
                <i class="fas fa-times mr-1"></i>未找到
              </button>
              <button class="btn-sm btn-primary">
                <i class="fas fa-check mr-1"></i>已盘点
              </button>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow p-3">
            <div class="flex justify-between items-start">
              <div>
                <div class="font-medium">惠普 LaserJet Pro M428fdw</div>
                <div class="text-sm text-gray-500 mt-1">编号: A2023003</div>
                <div class="text-sm text-gray-500">使用人: 公共设备</div>
                <div class="text-sm text-gray-500">位置: 信息科技部打印室</div>
              </div>
              <div class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded">
                已盘点
              </div>
            </div>
            <div class="text-xs text-gray-500 mt-2">
              盘点时间: 2024-05-12 14:30
            </div>
          </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center py-4">
          <button class="text-blue-500 text-sm">
            加载更多 <i class="fas fa-chevron-down ml-1"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item active">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 扫码盘点模态框 -->
  <div class="modal" id="scanModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">扫码盘点</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="scanner-container">
          <div class="scanner-frame">
            <div class="scanner-line"></div>
          </div>
          <div class="scanner-text">请将资产二维码/条形码对准扫描框</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 搜索盘点模态框 -->
  <div class="modal" id="searchModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">搜索资产</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="search-box mb-4">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="输入资产编号或名称" class="search-input">
        </div>
        <div class="search-results">
          <!-- 搜索结果将在这里显示 -->
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 扫码盘点
    document.querySelector('button:contains("扫码盘点")').addEventListener('click', function() {
      document.getElementById('scanModal').classList.add('active');
    });
    
    // 搜索盘点
    document.querySelector('button:contains("搜索盘点")').addEventListener('click', function() {
      document.getElementById('searchModal').classList.add('active');
    });
    
    // 关闭模态框
    document.querySelectorAll('.modal-close').forEach(button => {
      button.addEventListener('click', function() {
        this.closest('.modal').classList.remove('active');
      });
    });
    
    // 资产盘点操作
    document.querySelectorAll('.btn-sm.btn-primary').forEach(button => {
      button.addEventListener('click', function() {
        const assetItem = this.closest('.bg-white');
        const statusBadge = assetItem.querySelector('.bg-yellow-100');
        
        if (statusBadge) {
          statusBadge.className = 'bg-green-100 text-green-700 text-xs px-2 py-1 rounded';
          statusBadge.textContent = '已盘点';
          
          const buttonGroup = this.parentElement;
          const timestamp = new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
          
          buttonGroup.innerHTML = `<div class="text-xs text-gray-500">盘点时间: ${timestamp}</div>`;
          
          // 更新进度条
          const progressBar = document.querySelector('.bg-blue-500');
          const progressText = document.querySelector('.text-xs.text-gray-500.mt-1');
          
          const current = parseInt(progressText.textContent.split('/')[0].split(':')[1].trim());
          const total = parseInt(progressText.textContent.split('/')[1]);
          
          const newCurrent = current + 1;
          const newPercentage = (newCurrent / total) * 100;
          
          progressBar.style.width = `${newPercentage}%`;
          progressText.textContent = `已盘点: ${newCurrent}/${total}`;
        }
      });
    });
    
    // 资产未找到操作
    document.querySelectorAll('.btn-sm.btn-outline').forEach(button => {
      button.addEventListener('click', function() {
        const assetItem = this.closest('.bg-white');
        const statusBadge = assetItem.querySelector('.bg-yellow-100');
        
        if (statusBadge) {
          statusBadge.className = 'bg-red-100 text-red-700 text-xs px-2 py-1 rounded';
          statusBadge.textContent = '未找到';
          
          const buttonGroup = this.parentElement;
          const timestamp = new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
          
          buttonGroup.innerHTML = `
            <div class="text-xs text-gray-500">记录时间: ${timestamp}</div>
            <button class="text-blue-500 text-xs mt-1">添加备注</button>
          `;
          
          // 更新进度条
          const progressBar = document.querySelector('.bg-blue-500');
          const progressText = document.querySelector('.text-xs.text-gray-500.mt-1');
          
          const current = parseInt(progressText.textContent.split('/')[0].split(':')[1].trim());
          const total = parseInt(progressText.textContent.split('/')[1]);
          
          const newCurrent = current + 1;
          const newPercentage = (newCurrent / total) * 100;
          
          progressBar.style.width = `${newPercentage}%`;
          progressText.textContent = `已盘点: ${newCurrent}/${total}`;
        }
      });
    });
  </script>
</body>
</html>